<template>
<div class="apply-process">
  <c-header :title="'应聘流程'"></c-header>
  <div class="apply-process-hd">
  </div>
  <div class="apply-process-bd">
    <van-steps>
      <van-step>达到资格</van-step>
      <van-step>填写资料</van-step>
      <van-step>等待审核</van-step>
      <van-step>完成审核</van-step>
    </van-steps>
    <div class="content">
      <span class="t1">你还没有达到应聘资格</span>
      <span class="t2">继续努力喔!</span>
    </div>
    <div class="explain">
      <p>1独1培训课时达到20课时,总课时达到60课时且个人销售佣金达到1000元，即可应聘成为销售总监，正式签约并通过考试后，可享受以下待遇</p>
      <p>1.安全稳定,签署正式劳动合同</p>
      <p>2.福利无忧，为您缴纳五险一金</p>
      <p>3.收入丰厚,高于行业水平的基本工资和绩效奖金</p>
    </div>
  </div>
  <div class="apply-process-ft">
     <button>推荐VIP导购</button>
  </div>
</div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
@import '../../assets/styles/common.scss';
.apply-process {
    background-color: #fff;
    height: 100vh;
    &-hd {
        height: px2rem(250px);
        width: 100%;
        background-color: #fff;
        background-image: url("/static/images/vip/bg-4.png");
        background-repeat: no-repeat;
        background-size: cover;
        border-bottom: 1px solid #f2f2f2;
    }
    &-bd {
        > .content {
            height: px2rem(130px);
            width: 70%;
            margin: 0 15%;
            box-sizing: border-box;
            background-image: url("/static/images/vip/bg-3.png");
            background-repeat: no-repeat;
            background-size: contain;
            display: flex;
            flex-direction: column;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            align-content: center;
            .t1 {
                @include font-dpr(16px);
                font-weight: bolder;
            }
            .t2 {
                margin-top: px2rem(20px);
                @include font-dpr(14px);
                font-weight: bolder;
            }

        }
        .explain {
            padding: px2rem(25px);
            @include font-dpr(12px);
            p {
                line-height: px2rem(40px);
                &:first-child {
                    line-height: px2rem(30px);
                    font-weight: bolder;
                    margin-bottom: px2rem(20px);
                }
            }
        }
        .van-steps--horizontal {
            padding: px2rem(0) px2rem(20px);

        }

    }
    &-ft{
      width: 100%;
      position: fixed;
      bottom: 0;
      background-color: #f9f9f9;
      height: px2rem(100px);
      border-top: 1px solid #f2f2f2;
      button{
        width: 80%;
        margin: px2rem(20px) 10%;
        outline: none;
        border: none;
        background-color: #f44;
        color: #fff;
        line-height: px2rem(60px);
        @include font-dpr(15px);
        border-radius: px2rem(8px);
      }
    }
}
.van-steps--horizontal {
    &:last-child {
        right: 1px !important;
    }
}
</style>
